<template>
	<view>
		<cu-custom :bgImage="bgData" :isBack="true"><block slot="backText">返回</block>
			<block slot="content">新增人员</block>
		</cu-custom>
		
		<form @submit="onSubmit">
			<view class="cu-form-group">
				<view class="action">
					头像
				</view>
				
				<view class="grid col-3 grid-square flex-sub justify-end">
					<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
					 <image :src="imgList[index]" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="ChooseImage" v-if="imgList.length<1">
						<text class='cuIcon-cameraadd' style="font-size: 40px;"></text>
					</view>
				</view>
			</view>
			<view class="cu-form-group">
				<view class="title">姓名</view>
				<input class="text-right" placeholder="输入姓名" name="input" v-model="user.name"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">职务</view>
				<input class="text-right" placeholder="输入职务" name="input" v-model="user.position"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">性别</view>
				<switch class='switch-sex' @change="SwitchC" :class="user.sex=='1'?'checked':''" :checked="user.sex=='1'?true:false"></switch>
			</view>
			<view class="cu-form-group">
				<view class="title">昵称</view>
				<input class="text-right" placeholder="输入昵称" name="input" v-model="user.nickname"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">特长</view>
				<input style="text-align: right;" placeholder="输入特长" name="input" v-model="user.talent"></input>
			</view>
			<view class="cu-form-group align-start">
				<view class="title">备注</view>
				<textarea maxlength="-1" @input="textareaBInput" placeholder="输入备注" class="text-right" style="right: 10px;" v-model="user.remark"></textarea>
			</view>
			
			<view class="cu-form-group margin-top">
				<view class="title">是否显示价位</view>
				<switch @change="SwitchA" :class="user.isShowPrice=='1'?'checked':''" :checked="user.isShowPrice=='1'?true:false"></switch>
			</view>
			<view class="cu-list menu-avatar margin-top">
				<view class="cu-item" style="height:40px" :class="modalName=='move-box-'+ index?'move-cur':''" 
				 v-for="(item,index) in childList" :key="index"
				 @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index">
					<text class="cuIcon-cascades cu-avatar" style="font-size: 25px;"></text>
					<view class="content">
						<view class="text-grey">{{item.name}}</view>
					</view>
					<view class="action">
						<view class="text-grey text-xs">¥ {{item.price}}</view>
					
					</view>
					
					<view class="move">
						<view class="bg-red" @tap="deleteChildUser(item.id, index)">删除</view>
					</view>
				</view>
			</view>
		
			<view class="padding-xl" style="padding: 14px;" @tap="showModal" data-target="bottomModal">
				<button class="cu-btn block line-green lg">
					<text class="cuIcon-add"></text> 新增子项
					</button>
			</view>
			<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
				<view class="cu-dialog">
					<view class="cu-bar bg-white">
						<view class="action text-green" @tap="addChildProject">确定</view>
						<view class="action text-blue" @tap="hideModal">取消</view>
					</view>
					<view class="cu-form-group">
						<view class="title">收费项目</view>
						<input class="text-right" placeholder="输入收费项目" name="input" v-model="childProjectName"></input>
					</view>
					<view class="cu-form-group">
						<view class="title">价格/¥</view>
						<input style="text-align: right;" placeholder="输入价格" name="input" type="number" v-model="childPrice"></input>
					</view>
				</view>
			</view>
			
			<view class="padding flex flex-direction">
				<button class="cu-btn bg-blue lg" form-type="submit">保存</button>
				<button class="cu-btn bg-red margin-tb-sm lg" v-if="isExist" @tap="deleteChild">删除该人员</button>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgData: this.imgPath+'back.png',
				imgData: '',
				imgList: [],
				modalName: null,
				user: {
					name: '',
					sex: '1',
					nickname: '',
					position: '',
					isShowPrice: '1',
					talent: '',
					remark: '',
					imgId: '',
					child: []
				},
				userId: '',
				childList: [],
				childProjectName: '',
				childPrice: null,
				isExist: false
			}
		},
		onLoad(e) {
			if(e.id === null || e.id === '' || e.id === undefined) {
				
			} else {
				this.userId = e.id
				this.getUser(e.id)
				this.getChildUser(e.id)
				this.isExist = true
			}
			
		},
		methods: {
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			ChooseImage() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						if (this.imgList.length != 0) {
							this.imgList = this.imgList.concat(res.tempFilePaths)
						} else {
							this.imgList = res.tempFilePaths
						}
						uni.uploadFile({
							url: this.serverPath + "common/uploadImg", //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'file',
							success: (res) => {
								let obj =JSON.parse(res.data)
								this.user.imgId = obj.data
							},
						
							fail: (err) => {
								console.log(JSON.stringify(err));
							}
						});
					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '管理员',
					content: '确定要删除该图片吗？',
					cancelText: '再看看',
					confirmText: '再见',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			deleteChild(e) {
				uni.request({
					url: this.serverPath + 'user/deleteUserById',
					method: 'POST',
					header:{
						'Content-type':'application/x-www-form-urlencoded'
					},
					data: {
						id: this.userId
					},
					success:(res)=> {
						if(res.data.status==200){
							uni.showToast({
								title:'删除人员成功！',
								duration: 2000,
								success: () => {
									uni.navigateBack({
										delta: 1
									})
								}
							})
						}else{
							uni.showToast({
								icon:'none',
								title:res.data.msg
							})
						}
					}
				})
			},
			deleteChildUser(id, index) {
				this.childList.splice(index, 1)
				uni.request({
					url: this.serverPath + 'user/deleteChildUserById',
					method: 'POST',
					header:{
						'Content-type':'application/x-www-form-urlencoded'
					},
					data: {
						id: id
					},
					success:(res)=> {
						console.log(res)
					}
				})
			},
			SwitchA(e) {
				if(e.detail.value) {
					this.user.isShowPrice = '1'
				} else {
					this.user.isShowPrice = '0'
				}
			},
			SwitchC(e) {
				if(e.detail.value) {
					this.user.sex = '1'
				} else {
					this.user.sex = '0'
				}
			},
			textareaBInput(e) {
				this.textareaBValue = e.detail.value
			},
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},
			
			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},
			
			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			},
			getUser(id) {
				uni.request({
					url: this.serverPath + 'user/postUserById',
					method: 'POST',
					header:{
						'Content-type':'application/x-www-form-urlencoded'
					},
					data: {
						id: id
					},
					success:(res)=> {
						this.user = res.data.data
						this.imgList.push(this.user.img)
					}
				})
			},
			getChildUser(id) {
				uni.request({
					url: this.serverPath + 'user/postChildUserListById',
					method: 'POST',
					header:{
						'Content-type':'application/x-www-form-urlencoded'
					},
					data: {
						id: id
					},
					success:(res)=> {
						this.childList = res.data.data
					}
				})
			},
			addChildProject(e) {
				if(this.childProjectName==null || this.childProjectName==''){
					uni.showToast({
						icon:'none',
						title:'请输入收费项名称'
					})
					return;
				}
				if(this.childPrice==null || this.childPrice==''){
					uni.showToast({
						icon:'none',
						title:'请输入收费价格'
					})
					return;
				}
				uni.showLoading({
				    title: '加载中',
					mask:true
				});
				uni.request({
					url: this.serverPath + '/user/addChildUser',
					method: 'POST',
					header:{
						'Content-type':'application/x-www-form-urlencoded'
					},
					data: {
						name: this.childProjectName,
						price: this.childPrice
					},
					success:(res)=> {
						uni.hideLoading();
						if(res.data.status==200){
							uni.showToast({
								title:'添加子项成功',
								success: () => {
									this.hideModal()
									let child = {}
									child.name = this.childProjectName
									child.price = this.childPrice
									child.id = res.data.data
									this.childList.push(child)
									this.childProjectName = ''
									this.childPrice = ''
								}
							})
						}else{
							uni.showToast({
								icon:'none',
								title:res.data.msg
							})
						}
					}
				})
			},
			// 提交人员表单
			onSubmit() {
				if(this.user.name==null || this.user.name==''){
					uni.showToast({
						icon:'none',
						title:'请输入姓名'
					})
					return;
				}
				if(this.user.position==null || this.user.position==''){
					uni.showToast({
						icon:'none',
						title:'请输入职务'
					})
					return;
				}
				
				uni.showLoading({
				    title: '加载中',
					mask:true
				});
				this.user.child = []
				this.childList.forEach(item=>{
					this.user.child.push(item.id)
				})
				if(this.isExist) {
					this.updatePerson()
				} else {
					this.addPerson()
				}
				
			},
			addPerson() {
				uni.request({
					url: this.serverPath + '/user/addUser',
					method: 'POST',
					header:{
						'Content-type':'application/x-www-form-urlencoded'
					},
					data: this.user,
					success:(res)=> {
						uni.hideLoading();
						if(res.data.status==200){
							uni.showToast({
								title:'成功添加新成员！',
								success: () => {
									uni.navigateBack({
										delta: 1
									})
								}
							})
						}else{
							uni.showToast({
								icon:'none',
								title:res.data.msg
							})
						}
					}
				})
			},
			updatePerson() {
				uni.request({
					url: this.serverPath + '/user/updateUser',
					method: 'POST',
					header:{
						'Content-type':'application/x-www-form-urlencoded'
					},
					data: this.user,
					success:(res)=> {
						uni.hideLoading();
						if(res.data.status==200){
							uni.showToast({
								title:'成功添加新成员！',
								success: () => {
									uni.navigateBack({
										delta: 1
									})
								}
							})
						}else{
							uni.showToast({
								icon:'none',
								title:res.data.msg
							})
						}
					}
				})
			}
		}
	}
</script>

<style>
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
	
	/* uni-switch .wx-switch-input:not([class*="bg-"]), uni-switch .uni-switch-input:not([class*="bg-"]) {
	    background: #e54d42 !important;
	} */
	
	.grid.grid-square>uni-view {
		margin: unset;
	}
</style>
